<template>
  <page class="white-bg fxl px16">
    <ul class="bd px10 mt20 fitw">
      <li class="h50 bdb" flex="main:justify cross:center">
        <span>longitude(经度)</span>
        {{coords.longitude}}
      </li>
      <li class="h50 bdb" flex="main:justify cross:center">
        <span>latitude(纬度)</span>
        {{coords.latitude}}
      </li>
      <li class="h50" flex="main:justify cross:center">
        <span>accuracy(位置精度)</span>
        {{coords.accuracy}}
      </li>
    </ul>
    <div class="h60 mt10 bd px16" flex="dir:top main:center cross:justify">
      <span class="f14 text2">accuracy(地址)</span>
      <p class="mt3">{{address}}</p>
    </div>
    <div class="h60 mt10 bd px16" flex="dir:top main:center cross:justify">
      <span class="f14 text2">recommend(推荐位置)</span>
      <p class="mt3">{{formatted_addresses.recommend}}</p>
    </div>
    <div class="h60 mt10 bd px16" flex="dir:top main:center cross:justify">
      <span class="f14 text2">rough(副选位置)</span>
      <p class="mt3">{{formatted_addresses.rough}}</p>
    </div>
    <div class="tc mt30">
      <i class="iconfont icon-shuaxin f32 text2" @click="on_refresh"></i>
    </div>
  </page>
</template>
<script>
  import {getLocation} from '@/common/jssdk'
  import axios from 'axios'
  import jsonp from 'jsonp'
  export default {
    data() {
      return {
        coords: {},
        address: null,
        formatted_addresses: {}
      }
    },
    created() {
      this.on_refresh()
    },
    computed: {},
    methods: {
      async on_refresh() {
        try {
          this.$vux.loading.show({text: '获取位置中...'})
          let promise = await Promise.all([getLocation(), sleep(300)])
          this.coords = promise[0]
          this.geocoder()
        } finally {
          this.$vux.loading.hide()
        }
      },
      async geocoder() {
        jsonp(`https://apis.map.qq.com/ws/geocoder/v1?location=${this.coords.latitude},${this.coords.longitude}&output=jsonp&key=OHJBZ-JFH3X-ONW4X-TYLJT-OXECE-UPFPQ`, null, (err, data) => {
          if (err) {
            console.error(err.message);
          } else {
            let {status, result} = data
            if (status != 0) return;
            this.address = result.address
            this.formatted_addresses = result.formatted_addresses
          }
        })
      }
    },
    beforeDestroy () {
      this.$vux.loading.hide()
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
